<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
</head>

<body>
	<div class="login" style="display: none;">
		<div class="content clearBoth">
			<!-- <div class="left">
				<img class="title animated zoomIn" src="https://webfiledata.66y.com/guanwang/images/slogan@2x.png"
					alt="">
			</div> -->
			<div onclick="noLogin()" class="noLogin">
				<svg t="1719212444977" class="icon" viewBox="0 0 1024 1024" version="1.1"
					xmlns="http://www.w3.org/2000/svg" p-id="5257" width="200" height="200">
					<path
						d="M63.7 511.5c0 247 201 448 448 448s448-201 448-448-201-448-448-448-448 200.9-448 448z m806.4 0c0 197.6-160.8 358.4-358.4 358.4S153.3 709.1 153.3 511.5 314 153.1 511.7 153.1s358.4 160.7 358.4 358.4z"
						fill="#646464" p-id="5258"></path>
					<path
						d="M575 384.7l-63.4 63.4-63.4-63.4c-17.5-17.5-45.9-17.5-63.4 0s-17.5 45.9 0 63.4l63.4 63.4-63.2 63.3c-17.5 17.5-17.5 45.9 0 63.4s45.9 17.5 63.4 0l63.4-63.4 63.4 63.4c17.5 17.5 45.9 17.5 63.4 0s17.5-45.9 0-63.4L575 511.5l63.4-63.4c17.5-17.5 17.5-45.9 0-63.4s-45.9-17.5-63.4 0z"
						fill="#646464" p-id="5259"></path>
				</svg>
			</div>
			<div class="right SignIn">
				<div class="SignIn">
					<div class="">
						<div class="modal-form">
							<h2 class="title">
								登录
							</h2>
						</div>
						<div class="modal-form" prop="mobile" verify="mobile">
							<span class="form-label">您的手机号</span>
							<input class="form-input login-mobile-input input-account login-reset-input" type="text"
								autocomplete="username" placeholder="请输入您的手机号" name="username" clearable />
						</div>
						<div class="modal-form" prop="password" verify="password">
							<span class="form-label">您的密码</span>
							<input class="form-input input-key login-reset-input" name="password" type="password"
								autocomplete="password" placeholder="请输入您的密码" clearable />
							<span toggle="#password-field" class="eye-icon"></span>
						</div>
						<div class="modal-form" prop="sms_code" verify="sms_code">
							<span class="form-label">短信验证码</span>
							<input class="form-input form-input-code login-code-input login-reset-input" type="text"
								placeholder="请输入您的短信验证码" clearable />
							<span class="sendSmsCode" type="SignIn">发送验证码</span>
						</div>
						<div class="modal-form arightClass">
							<span class="form-label clearBoth">
								<a href="javascript:;" onclick="rightClass('Register')"
									style="text-align:left;float:left;" class="btn-modify-pass">没有账号？去注册</a>
								<a href="javascript:;" onclick="rightClass('PasswordService')"
									style="text-align:right;float:right;" class="btn-modify-pass">忘记密码？</a>
							</span>
						</div>
						<div class="modal-form">
							<button class="btn-sure btn-login-submit">
								登录
							</button>
						</div>
					</div>
				</div>
				<div class="Register">
					<div class="">
						<div class="modal-form">
							<h2 class="title">
								注册
							</h2>
						</div>
						<div class="modal-form" prop="mobile" verify="mobile">
							<span class="form-label">您的手机号</span>
							<input class="form-input register-mobile-input register-reset-input" name="user"
								autocomplete="mobile" type="text" placeholder="请输入您的手机号" clearable />
						</div>
						<div class="modal-form" prop="sms_code" verify="sms_code">
							<span class="form-label">短信验证码</span>
							<input class="form-input form-input-code login-code-input login-reset-input"
								autocomplete="off" type="text" placeholder="请输入您的短信验证码" clearable />
							<span class="sendSmsCode" type="Register">发送验证码</span>
						</div>
						<div class="modal-form" prop="password" verify="password">
							<span class="form-label">您的密码</span>
							<input class="form-input register-pass-input register-reset-input" name="password"
								autocomplete="password" type="password" placeholder="请输入您的密码" clearable />
						</div>
						<div class="modal-form" prop="real_name" verify="real_name">
							<span class="form-label">您的姓名</span>
							<input class="form-input register-real-name-input register-reset-input" type="text"
								placeholder="请输入您的姓名" clearable />
						</div>
						<div class="modal-form" prop="id_number" verify="id_number">
							<span class="form-label">您的身份证号码</span>
							<input class="form-input register-idcard-input register-reset-input" type="text"
								placeholder="请输入您的身份证号码" clearable />
						</div>
						<div class="modal-form arightClass">
							<span class="form-label clearBoth">
								<a href="javascript:;" onclick="rightClass('SignIn')"
									style="text-align:left;float:left;" class="btn-modify-pass">有账号？去登录</a>
								<a href="javascript:;" onclick="rightClass('PasswordService')"
									style="text-align:right;float:right;" class="btn-modify-pass">有账号？忘记密码</a>
							</span>
						</div>
						<div class="modal-form">
							<button class="btn-sure btn-register-submit">
								注册
							</button>
						</div>
					</div>
				</div>
				<div class="PasswordService">
					<div class="">
						<div class="modal-form">
							<h2 class="title">
								修改密码
							</h2>
						</div>
						<div class="modal-form" prop="mobile" verify="mobile">
							<span class="form-label">您的手机号</span>
							<input class="form-input modify-mobile-input modify-reset-input" name="username"
								autocomplete="username" type="text" placeholder="请输入您的手机号" clearable />
						</div>
						<div class="modal-form" prop="password" verify="password">
							<span class="form-label">您的新密码</span>
							<input class="form-input modify-pass-input modify-reset-input pass-verify" name="password"
								autocomplete="password" type="password" placeholder="请输入您的密码" clearable />
						</div>
						<div class="modal-form" prop="sms_code" verify="sms_code">
							<span class="form-label">短信验证码</span>
							<input class="form-input form-input-code login-code-input login-reset-input" type="text"
								placeholder="请输入您的短信验证码" clearable />
							<span class="sendSmsCode" type="PasswordService">发送验证码</span>
						</div>
						<div class="modal-form arightClass">
							<span class="form-label clearBoth">
								<a href="javascript:;" onclick="rightClass('SignIn')"
									style="text-align:left;float:left;" class="btn-modify-pass">修改成功？去登录</a>
								<a href="javascript:;" onclick="rightClass('Register')"
									style="text-align:right;float:right;" class="btn-modify-pass">没有账号？去注册</a>
							</span>
						</div>
						<div class="modal-form">
							<button class="btn-sure btn-modify-submit">
								确认
							</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="./js/message.js"></script>
	<script type="text/javascript">
		// 初始化配置
		var serverDomain = 'https://lele-live.youxinhuyu.cn/';
		var apiAction = 'api/webuser';
		var registerFunc = '?action=register';
		var loginFunc = '?action=login';
		var modifyFunc = '?action=modifypass';
		var sendCodeFunc = '?action=sendcode';
		var oauthFunc = '?action=useroauth';
		var passPattern = true;
		var sendSmsCodeSetInterval = null;

		$(document).ready(function () {
			postOfficialwebsitelogLog('browse', 'link_login');
			var loginAuth = getCookie('login_auth');
			var url = serverDomain + apiAction + oauthFunc;
			$.ajax({
				type: 'post',
				url: url,
				dataType: 'json',
				data: { 'auth': loginAuth },
				success: function (data) {
					if (data.code == 200) {
						setCrumbOauth(data.data)
					} else {
						loginOut();
					}
				},
				error: function () {

				}
			})
		});


		// 打开登录
		function login(type) {
			if (!getCookie('login_auth')) {
				rightClass(type)
				$('.login').css({ display: 'flex' })
				$('html').css({ overflow: 'hidden' })
			}
		}

		// 关闭登录
		function noLogin() {
			$('.login').css({ display: 'none' })
			$('html').css({ overflow: 'auto' })
		}

		// 切换登录、注册、修改密码
		function rightClass(val) {
			ResetProp(val);
			$('.login .right').attr('class', `right ${val}`);
		}

		// -注册
		$('.btn-register-submit').click(function () {
			// 加载load...
			loadSwith('register', true);

			const type = 'Register';
			var requestApi = serverDomain + apiAction + registerFunc;
			verifyProp(type).then((data) => {
				$.ajax({
					type: 'post',
					url: requestApi,
					dataType: 'json',
					data: data,
					success: function (data) {
						if (data.code != 200) {
							$.message({
								message: data.msg,
								showClose: true,
								type: 'error'
							});
						} else {
							noLogin();
							setCrumbOauth(data.data);
							$.message({
								message: '登录成功！',
								showClose: true,
								type: 'success'
							});
						}
						loadSwith('register', false);
					},
					error: function () {
						loadSwith('register', false);
					}
				})
				postOfficialwebsitelogLog('browse', `link_login_${type}`);
			}, () => {
				loadSwith('register', false);
			})

		})

		// -登录
		$('.btn-login-submit').click(function () {
			// 加载load...
			loadSwith('login', true);

			const type = 'SignIn';
			var requestApi = serverDomain + apiAction + loginFunc;
			verifyProp(type).then((data) => {
				$.ajax({
					type: 'post',
					url: requestApi,
					dataType: 'json',
					data: data,
					success: function (data) {
						if (data.code != 200) {
							$.message({
								message: data.msg,
								showClose: true,
								type: 'error'
							});
						} else {
							noLogin();
							setCrumbOauth(data.data);
							$.message({
								message: '登录成功！',
								showClose: true,
								type: 'success'
							});
						}
						loadSwith('login', false);
					},
					error: function () {
						loadSwith('login', false);
					}
				})
				postOfficialwebsitelogLog('browse', `link_login_${type}`);
			}, () => {
				loadSwith('login', false);
			})
		})

		// -改密
		$('.btn-modify-submit').click(function () {
			// 加载load...
			loadSwith('modify', true);

			const type = 'PasswordService';
			var requestApi = serverDomain + apiAction + modifyFunc;
			verifyProp(type).then((data) => {
				$.ajax({
					type: 'post',
					url: requestApi,
					dataType: 'json',
					data: data,
					success: function (data) {
						if (data.code != 200) {
							$.message({
								message: data.msg,
								showClose: true,
								type: 'error'
							});
						} else {
							$.message({
								message: '修改成功！请前往登录',
								showClose: true,
								type: 'success'
							});
							// setTimeout(function () {
							// 	// 前往登录
							// 	rightClass('SignIn')
							// }, 500);
						}
						loadSwith('modify', false);
					},
					error: function () {
						loadSwith('modify', false);
					}
				})
				postOfficialwebsitelogLog('browse', `link_login_${type}`);
			}, () => {
				loadSwith('modify', false);
			})
		})

		// -退出
		$('.btn-login-out').click(function () {
			loginOut();
			$.message({
				message: '退出成功！请前往登录',
				showClose: true,
				type: 'success'
			});
		});

		function loginOut() {
			delCookie('login_auth');
			delCookie('real_name');

			$('.user-name').text('登录/注册');
			$('.login-error').css('display', 'block');
			$('.login-success').css('display', 'none');
		}

		// -load开关
		function loadSwith(type, onOff) {
			if (type == 'register') {
				var loadId = 'register-loading';
				var btnSubmitClass = 'btn-register-submit';
			} else if (type == 'login') {
				var loadId = 'login-loading';
				var btnSubmitClass = 'btn-login-submit';
			} else {
				var loadId = 'modify-loading';
				var btnSubmitClass = 'btn-modify-submit';
			}

			if (onOff) {
				$("." + btnSubmitClass).addClass('disabled');
				$("." + btnSubmitClass).attr('disabled', true);
				$("#" + loadId).css('display', 'block');
			} else {
				$("." + btnSubmitClass).removeClass('disabled');
				$("." + btnSubmitClass).attr('disabled', false);
				$("#" + loadId).css('display', 'none');
			}
		}

		function verifyProp(type, list) {
			return new Promise((resolve, reject) => {
				let data = {}
				let is = (list || $(`.right .${type} .modal-form[prop]`)).filter((index, e) => {
					const { prop, verify } = getAllAttributes(e)
					const value = $(e).find('.form-input').val();
					data[prop] = value;
					return !verifyInput(verify, value, e);
				})
				if (is.length) {
					reject(is.map(e => e.prop))
				} else {
					resolve(data)
				}
			})
		}

		function ResetProp(type) {
			if (type) {
				$(`.right .${type} .modal-form[prop]`).map((index, e) => {
					$(e).find('.form-input').val('')
				})
			} else {
				$(`.right .modal-form[prop]`).map((index, e) => {
					$(e).find('.form-input').val('')
				})
			}
			if (sendSmsCodeSetInterval) window.clearInterval(sendSmsCodeSetInterval);
			$('.sendSmsCode').html('发送验证码');
			$('.verifyInput').remove();
		}

		// -验证内容
		function verifyInput(field, value, e) {
			let htmlId = 'cdwewd'
			$(e).find('.verifyInput').remove();
			if (field == 'mobile') {
				var mobileReg = /^1[0-9]{10}$/;
				if (!mobileReg.test(value)) {
					$(e).append("<p class='verifyInput'>请输入正确格式的手机号!</p>");
					return false;
				}
			} else if (field == 'password') {
				var passReg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}[\]\\|:;'<>,.?\/])[a-zA-Z\d\~\!\@\#\$\%\^\&\*\(\)\_\+\`\-\=\{\}\[\]\\|\:\;\"\'\<\>\,\.\?\/]{8,16}$/;
				if (!passReg.test(value)) {
					$(e).append("<p class='verifyInput'>请输入8-16位包含大小字母+数字+符号组合的密码组合！</p>");
					return false;
				}
			} else if (field == 'sms_code') {
				var smsReg = new RegExp(/^\d{6}$/);
				if (!smsReg.test(value)) {
					$(e).append("<p class='verifyInput'>请输入6位验证码!</p>");
					return false;
				}
			} else if (field == 'real_name') {
				// 必须中文
				var realReg = new RegExp(/^[\u4E00-\u9FA5]+$/);
				if (!realReg.test(value)) {
					$(e).append("<p class='verifyInput'>请输入中文姓名!</p>");
					return false;
				}
				// 长度为2~16
				var realArr = value.split('');
				if (realArr.length < 2 || realArr.length > 16) {
					$(e).append("<p class='verifyInput'>请输入2~16位中文姓名!</p>");
					return false;
				}
			} else if (field == 'id_number') {
				var idNumberReg = /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dX]$/;
				if (!idNumberReg.test(value)) {
					$(e).append("<p class='verifyInput'>请输入正确格式的身份证号码!</p>");
					return false;
				}
			}
			return true;
		}

		// 立即执行的截流
		let throttle = (fun, time) => {
			let pre = 0
			return function () {
				let now = Date.now()
				let self = this
				let args = arguments
				if (now - pre > time) {
					fun.apply(self, args)
					pre = now
				}
			}
		}

		$('.sendSmsCode').click(throttle(function () {
			const _this = this
			if ($(_this).html() === '发送验证码') {
				const type = $(_this).attr('type')
				var requestApi = serverDomain + apiAction + loginFunc;
				verifyProp(type, $(`.right .${type} .modal-form[prop="mobile"]`)).then((data) => {
					var requestUrl = serverDomain + apiAction + sendCodeFunc
					requestUrl += `&type=${['Register', 'PasswordService', 'SignIn'].indexOf(type) + 1}`;
					requestUrl += '&mobile=' + data.mobile;

					$.ajax({
						type: 'get',
						url: requestUrl,
						dataType: 'json',
						success: function (data) {
							if (data.code === 200) {
								var left_time = 60;
								sendSmsCodeSetInterval = window.setInterval(function () {
									left_time = left_time - 1;
									if (left_time <= 0) {
										window.clearInterval(sendSmsCodeSetInterval);
										$(_this).html('发送验证码');
									}
									else {
										$(_this).html('已发送（' + left_time + '）');
									}
								}, 1000);
							} else {
								$.message({
									message: data.msg,
									showClose: true,
									type: 'error'
								});
							}
						},
						error: function () {

						}
					})
					postOfficialwebsitelogLog('browse', `link_login_${type}_SmsCode`);
				}, () => {

				})
			}
		}, 2000))

		// -获取cookie
		function getCookie(name) {
			//获取当前所有cookie
			var strCookies = document.cookie;
			console.log(strCookies)
			//截取变成cookie数组
			var array = strCookies.split(';');
			//循环每个cookie
			for (var i = 0; i < array.length; i++) {
				//将cookie截取成两部分
				var item = array[i].split("=");
				//判断cookie的name 是否相等
				if (item[0].trim() == name) {
					return item[1].trim();
				}
			}
			return null;
		}
		// -设置cookie
		function setCookie(cName, cValue) {
			// 设置cookie
			document.cookie = cName + "=" + cValue;
			// 设置过期时间
			var nowTime = new Date();
			var expiresTime = new Date(nowTime.getTime() + 60 * 60 * 1000);
			document.cookie = `${cName}=${cValue};expires=${expiresTime.toUTCString()}`
		}
		// -删除cookie
		function delCookie(cName) {
			var exp = new Date();
			exp.setTime(exp.getTime() - 1);
			var cValue = getCookie(cName);

			if (cValue != null) {
				document.cookie = `${cName}=${cValue};expires=${exp.toUTCString()}`;
			}
		}

		// -设置导航用户信息
		function setCrumbOauth(authObj) {
			$('.user-name').text(authObj.real_name);
			$('.login-error').css('display', 'none');
			$('.login-success').css('display', 'block');

			if (authObj.auth) setCookie('login_auth', authObj.auth);
			if (authObj.real_name) setCookie('real_name', authObj.real_name);
		}

		function getAllAttributes(element) {
			var attributes = element.attributes;
			var attrs = {};
			for (var i = 0; i < attributes.length; i++) {
				attrs[attributes[i].name] = attributes[i].value;
			}
			return attrs;
		}

		function arrayToObject(arr) {
			var obj = {};
			for (var i = 0; i < arr.length; i++) {
				obj[arr[i][0]] = arr[i][1];
			}
			return obj;
		}
	</script>
</body>

</html>